<template>
    <div class="form" v-if="route.params.formId">
        <a-card class="h-full">
            <loading2 v-if="state.loading"/>
            <template v-else>
                <!-- 左侧表单填写区域 -->
                <div class="form-create mr-4 flex-1 overflow-auto border-r-2">
                    <div class="form-header flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold">表单填写</h2>
                        <a-button type="primary" @click="submit">提交</a-button>
                    </div>
                    <form-render-view
                        ref="formRenderViewRef"
                        :widgets="state.formWidgets"
                        :formState="state.formState"
                    />
                </div>
                <!-- 右侧审批流程区域 -->
                <lf-render
                    :basuc-form-data="state.formData"
                    :flow-content="state.flowContent"
                    :formState="state.formState"
                    :widgets="state.formWidgets"
                />
            </template>
        </a-card>
    </div>
    <div class="empty h-full flex justify-center items-center" v-else>
        <a-empty>
            <template #description>
                <a-tag color="blue">
                    未选中发起单据不能填写表单哦~
                </a-tag>
            </template>
        </a-empty>
    </div>
</template>

<script setup lang="ts" name="formIns">
import { apiAddFlowFormData, apiGetWfWorkFlowFormData } from '@/api/flow/flow';
import type { ResType } from '@/api/types';
import { onMounted, reactive, useTemplateRef, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import formRenderView from './components/formRenderView/index.vue'
import lfRender from './components/lfRender/index.vue'
import loading1 from '@/components/loading/loading1.vue';
import loading2 from '@/components/loading/loading2.vue';
import { fetchCompModule, initWidget } from '@/utils/component';
import { showMsg } from '@/utils';

const route = useRoute()
const router = useRouter()

const formRenderViewRef = useTemplateRef("formRenderViewRef")
const state = reactive<any>({
    formWidgets: [],
    loading:false,
    formData:null,
    flowContent:{},
    formState:{}
})

// 发起单据
const submit = async()=>{
    await formRenderViewRef.value?.submit()
    const res = await apiAddFlowFormData({
        formData:JSON.stringify(state.formState),
        flowId:state.formData.flowId,
        formId:state.formData.id
    }) as ResType<any>
    if(res.data.code === 200){
        showMsg("提交成功",'success')
        router.push('/flow/approval')
    }else{
        showMsg(res.data.message,'warning')
    }
}

// 注册渲染组件
const initFormWidgets = (data:any[])=>{
    const modules:Record<string,{default:string}> = import.meta.glob("./components/formRenderView/widgets/**",{eager:true})
    for (const item of data) {
        const type = "xy-r-" + item.type
        const res =fetchCompModule(type,modules) as string
        initWidget(type,res)
    }
}

const initFormFlowData = async ()=>{
    state.loading = true
    const formId = route.params.formId
    const res = await apiGetWfWorkFlowFormData(formId) as ResType<any>
    const data = res.data.result
    state.formWidgets = JSON.parse(data.formWidgets)
    state.formData = data.formData
    state.flowContent = JSON.parse(data.flowContent)
    initFormWidgets(state.formWidgets)
    state.loading = false
}

onMounted(()=>{
    if(!route.params.formId) return
    initFormFlowData()
})
</script>

<style lang="scss" scoped>
:deep(.ant-card-body){
    display: flex;
    height: calc(100vh - 120px);
    overflow: hidden;
}

.form-create {
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    
    &::-webkit-scrollbar {
        width: 6px;
        background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
        background-color: #a19e9e;
        border-radius: 4px;
        
        &:hover {
            background-color: #ccc;
        }
    }
}
</style>